import React, { useState, useEffect, useImperativeHandle } from 'react';
import { Form, Card, Select, message, Radio } from 'antd';
import { dictionaryList } from '@/services/dictionary';
import { connect } from 'umi';

const { Option } = Select;

const autoCompleteFlagOption = [
    { value: 0, label: '不启用自动去重' },
    { value: 1, label: '同一个审批人在流程中多次出现，启用自动审批通过' }
];

// 高级设置
const AdvancedSetting = React.forwardRef(({ form, dispatch, tabName, advancedData }, ref) => {
    const [classificationOptions, setClassificationOptions] = useState([]);

    const handleUpdate = () => {
        const values = form.getFieldsValue();

        dispatch({
            type: 'workFlowModel/save',
            payload: { advancedData: values }
        });
    };

    useImperativeHandle(ref, () => ({
        handleUpdate: typeString =>
            new Promise((resolve, reject) => {
                if (typeString === 'hold') {
                    resolve({ formData: form.getFieldsValue() });
                } else {
                    form.validateFields((err, values) => {
                        if (err) {
                            // eslint-disable-next-line prefer-promise-reject-errors
                            reject({ tabName });
                        } else {
                            handleUpdate();
                            resolve({ formData: values });
                        }
                    });
                }
            })
    }));

    // 获取分类下拉
    const fetchClassificationOptions = async () => {
        const { data, code, msg } = await dictionaryList({ code: 'flowAdvancedSettingType' });
        if (code === 10000) {
            const arr = [];
            if (data.length > 0) {
                data.forEach(item => {
                    arr.push({ value: item.dictValue, label: item.dictName });
                });
            }
            setClassificationOptions(arr);
        } else {
            message.error(msg);
        }
    };

    useEffect(() => {
        fetchClassificationOptions();
    }, []);

    return (
        <Card bordered={false} style={{ width: 600, margin: '16px 40px 25px' }}>
            <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
                <Form.Item label="审批人去重">
                    {form.getFieldDecorator('autoCompleteFlag', {
                        initialValue: advancedData.autoCompleteFlag || 0
                    })(
                        <Select placeholder="请选择分组" getPopupContainer={trigger => trigger.parentNode}>
                            {autoCompleteFlagOption.map(item => (
                                <Option key={item.value} value={item.value}>
                                    {item.label}
                                </Option>
                            ))}
                        </Select>
                    )}
                </Form.Item>
                <Form.Item label="分类">
                    {form.getFieldDecorator('classification', {
                        initialValue: advancedData.classification || undefined
                    })(
                        <Select
                            allowClear
                            placeholder="请选择分类"
                            getPopupContainer={trigger => trigger.parentNode}
                            showSearch
                            optionFilterProp="children"
                        >
                            {classificationOptions.map(item => (
                                <Option key={item.value} value={item.value}>
                                    {item.label}
                                </Option>
                            ))}
                        </Select>
                    )}
                </Form.Item>
                <Form.Item label="是否主岗发起">
                    {form.getFieldDecorator('mainDutyFlag', {
                        initialValue: advancedData.mainDutyFlag || 0
                    })(
                        <Radio.Group>
                            <Radio value={1}>是</Radio>
                            <Radio value={0}>否</Radio>
                        </Radio.Group>
                    )}
                </Form.Item>
            </Form>
        </Card>
    );
});

export default connect(({ workFlowModel }) => ({
    advancedData: workFlowModel.advancedData
}))(Form.create({ name: 'AdvancedSetting' })(AdvancedSetting));
